<%--
  Created by IntelliJ IDEA.
  User: teacher
  Date: 2023/11/2
  Time: 13:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Ajax返回JSON对象</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("li").mouseover(function (event) {
                $("#d").show();


                <%--$.get("${pageContext.request.contextPath}/findById.user?id=" + $(this).attr("data-id"),--%>
                    <%--function (user) {--%>
                        <%--console.log(user);--%>
                        <%--$("#d").css("left",event.clientX);--%>
                        <%--$("#d").css("top",event.clientY);--%>
                        <%--$("#s1").html(user.id);--%>
                        <%--$("#s2").html(user.username);--%>
                        <%--$("#s3").html(user.password);--%>
                        <%--$("#s4").html(user.phone);--%>
                        <%--$("#s5").html(user.address);--%>
                    <%--}, "json");--%>

                <%--$.post("${pageContext.request.contextPath}/findById.user",--%>
                    <%--{"id":$(this).attr("data-id")},--%>
                    <%--function (user) {--%>
                        <%--console.log(user);--%>
                        <%--$("#d").css("left",event.clientX);--%>
                        <%--$("#d").css("top",event.clientY);--%>
                        <%--$("#s1").html(user.id);--%>
                        <%--$("#s2").html(user.username);--%>
                        <%--$("#s3").html(user.password);--%>
                        <%--$("#s4").html(user.phone);--%>
                        <%--$("#s5").html(user.address);--%>
                    <%--}, "json");--%>

                // getJSON本质上就是get方法的第四个参数为JSON
                // $.getJSON(url,[data],callback);
                <%--$.getJSON("${pageContext.request.contextPath}/findById.user",--%>
                    <%--{"id":$(this).attr("data-id")},--%>
                    <%--function (user) {--%>
                        <%--console.log(user);--%>
                        // $("#d").css("left",event.clientX);
                        // $("#d").css("top",event.clientY);
                        // $("#s1").html(user.id);
                        // $("#s2").html(user.username);
                        // $("#s3").html(user.password);
                        // $("#s4").html(user.phone);
                        // $("#s5").html(user.address);
                    <%--});--%>

                $.ajax({
                    type:"post", // 默认值get
                    url:"${pageContext.request.contextPath}/findById.user",
                    data:{"id":$(this).attr("data-id")},
                    dataType:"json", // 默认值text
                    success:function(user){
                        console.log(user)
                        $("#d").css("left",event.clientX);
                        $("#d").css("top",event.clientY);
                        $("#s1").html(user.id);
                        $("#s2").html(user.username);
                        $("#s3").html(user.password);
                        $("#s4").html(user.phone);
                        $("#s5").html(user.address);
                    }
                });

            });

            $("li").mouseout(function () {
                $("#d").hide();
            });
        });
    </script>
</head>
<body>
<!--
    需求一:查询所有用户信息,在列表中展示所有的用户名
    此时可以使用传统的web请求方式
-->
<ul>
    <c:forEach items="${users}" var="user">
        <li data-id="${user.id}">${user.username}</li>
    </c:forEach>
</ul>
<hr>
<!--
    需求二:使用Ajax实现下面功能
    当鼠标悬停在某一个用户的选项上时,显示对应用户的详细信息
    当鼠标离开选项,隐藏信息
    显示时,要求div必须在鼠标旁边显示
    鼠标在哪,div就在那显示
-->
<div id="d" style="background-color: #dddddd;width: 300px;padding: 10px;position: absolute;display: none;">
    编号:<span id="s1">1</span><br>
    用户名:<span id="s2">adminxxx</span><br>
    密码:<span id="s3">123xxx</span><br>
    电话:<span id="s4">13812345xxx</span><br>
    地址:<span id="s5">江苏-xxx</span><br>
</div>
</body>
</html>
